<template lang="">
  <div>
    <UserDetail
      v-if="showStatus === ShowStatus.USER_DETAIL"
      @setShowStatus="setShowStatus"
      :userInfo="userInfo"
    />
    <UserList
      v-if="showStatus === ShowStatus.USER_LIST"
      @setShowStatus="setShowStatus"
      @setUserId="setUserId"
    />
    <UserForm
      v-if="showStatus === ShowStatus.USER_FORM"
      @setShowStatus="setShowStatus"
    />
  </div>
</template>
<script lang="ts">
export default {};
</script>
<script lang="ts" setup>
import { ref } from "vue";
import UserDetail from "./components/userDetail.vue";
import UserList from "./components/userList.vue";
import UserForm from "./components/userForm.vue";
import { ShowStatus } from "./types";
import { usersItemModel } from "@/types";
// 显示状态，控制页面组件的显示
const userInfo = ref<usersItemModel>();
const showStatus = ref<ShowStatus>(ShowStatus.USER_LIST);
interface InfoModel extends usersItemModel {
  _X_ROW_KEY: string;
}
const setUserId = (info: InfoModel | usersItemModel) => {
  delete info["_X_ROW_KEY"];
  userInfo.value = info;
};
const setShowStatus = (status: ShowStatus) => {
  showStatus.value = status;
};
</script>
<style lang=""></style>
